# 实战篇 8：小程序调试技巧和上线发布

# 真机调试

平时开发小程序可以在开发者工具中进行调试，开发者工具提供了类似 Chrome DevTools 的调试面板，对于前端开发者来说入门门槛比较低。

小程序开发完成之后，我们需要在真机上进行测试，真机调试方面小程序开发者工具有预览、远程调试和设置体验版本三大部分功能。除了这三种方式之外，我们还可以使用真机远程调试，在 iOS 上可以通过实现 Safari 调试代码，安卓中可以安装 X5 内核的 inspect 版本，开启 Chrome remote debug 模式。

本部分会简单介绍开发者工具的预览和远程调试功能，以及如何开启 iOS 和 Android 的真机调试功能，体验版本功能会在「上线」部分讲解。

# 预览功能

在开发者工具中，顶部有「预览」功能，点击后会编译打包当前代码，然后生成一个二维码，用开发者账号扫码就可以预览代码。当遇见问题需要同步编写代码 debug 的时候，可以切换到「自动预览」模式，如下图所示，只要代码发生变化就会重新编译自动启动小程序。

# 远程调试

远程调试也是在开发者工具中开启的，点击顶部的「远程调试」即出现跟预览功能类似的界面，打包上传之后也会出现一个二维码，通过扫码可以进入远程调试界面。这时候，手机会打开带有 vConsole 的小程序界面，而开发者工具的电脑则显示一个类似 Chrome DevTools 的开发者调试工具。这样就可以直接调试了。

# iOS 调试

下面介绍下如何使用 Xcode、Reveal 和 Safari 来真机调试 iOS 上的小程序。进行 iOS 调试需要使用 Mac 电脑，如果你用的是 Windows 系统，可以跳过本部分内容，直接查看后面的 Android 版本的 remote debug。

先大概说下原理，首先下载砸过壳版本的微信 ipa 文件（iOS App 程序的后缀），然后使用 IPAPatch 对 ipa 进行重新签名，签名账号可以使用自己的 Apple 账号，最后将项目编译到真机（也可以模拟器），就可以使用 Safari 进行调试了。

1. 下载 IPAPatch 项目
2. 使用 PP 助手下载砸过壳版本的微信 ipa（使用最新版本的微信，否则登录会提示需要升级），这个需要安装 PP 助手，下载后在下载目录找到其 ipa
3. 将微信的 ipa 文件命名为 app.ipa，替换掉 IPAPatch 目录的 Assets/app.ipa 文件
4. 使用 Xcode 打开 IPAPatch 项目
5. 修改签名到自己的开发者账号，没有开发者账号可以用自己的 Apple 账号登录

按照上面的提示，首先修改 BundleID（这里的填写可以比较随意），然后使用自己的 Apple ID 登录账号，再选择自己的真机（数据线连接后可以选择），选择后点击开始编译，编译结束会安装到自己的 iPhone 手机，安装成功后就会发现自己的手机有两个微信了。

接着再完成下面的步骤，就可以调试小程序了。

1. 在 iPhone 上信任自己的开发者描述文件：「设置 -> 通用 -> 描述文件 -> 信任你的证书」
2. 在 iPhone 上打开 Safari 调试功能：「设置 -> Safari -> 高级 -> Web 检查器打开」

首先登录微信账号，打开需要调试的小程序，打开后在 Mac 电脑上打开「Safari -> 开发」找到自己的 iPhone 手机，选择对应的页面就可以进行调试了。

这里说明下：

• JSContext：是小程序的逻辑层代码，执行在 JavaScriptCore 环境中
• page-frame.html：是小程序的视图层代码，执行在普通的 WKWebview 中
• 上图只开了一个小程序页面却显示了两个 page-frame.html，说明始终有一个页面在后台加载，准备打开小程序的其他页面（基础篇 3：小程序架构及其实现机制中介绍过）

# 调试 JSContext

打开 JSContext 之后，找到的第一个 JS 文件实际就是微信的逻辑层代码执行 waservice.js 了：

另外看到一些 JSBridge.subscribeHandle 的代码实际是 Native 实现的一些方法或事件，然后调用 JSContext 中的方法回传数据的。下面是点击事件的一个截图，会看到点击事件传递的数据。